<template>
    <div id="navcontainer">
        <div class="d-flex jc-center">
            <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
            <div class="d-flex jc-center">
                <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;"/>
                <div class="title">
                    <!--                    <span class="title-text">大数据可视化平台</span>-->
                    <router-link class="title-text" to="/">大数据可视化平台</router-link>
                    <dv-decoration-6
                            class="title-bototm"
                            :reverse="true"
                            :color="['#50e3c2', '#67a1e5']"
                            style="width:3.125rem;height:.1rem;"
                    />
                </div>
                <dv-decoration-8
                        :reverse="true"
                        :color="['#568aea', '#000000']"
                        style="width:2.5rem;height:.625rem;"
                />
            </div>
            <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
            <div class="d-flex" style="width: 40%">
                <div
                        class="react-right ml-4"
                        style="width: 6.25rem; text-align: left;background-color: #0f1325;"
                >
                    <span class="react-before"></span>
                    <router-link class="text colorBlue" to="/publicMsg">总体数据概览</router-link>
                </div>
                <div class="react-right ml-3" style="background-color: #0f1325;">
                    <!--                            <span class="text colorBlue" >数据分析2</span>-->
                    <router-link class="text colorBlue" to="publicMsg">2019年数据</router-link>

                </div>
            </div>
            <div style="width: 40%" class="d-flex">
                <div class="react-left  mr-3">
                    <!--                    bg-color-blue   背景色-->
                    <!--                    <span class="text fw-b">vue-big-screen</span>-->
                    <router-link class="text colorBlue" to="pageChange">2020年数据</router-link>
                </div>
                <div
                        class="react-left mr-4"
                        style="width: 6.25rem; background-color: #0f1325; text-align: right;"
                >
                    <span class="react-after"></span>
                    <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTime} from '../../utils'

    export default {
        name: "headenav",
        data() {
            return {
                loading: true,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            };
        },
        methods: {
            timeFn() {
                setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
        },
        mounted() {
            this.timeFn()
        }
    }
</script>

<style scoped lang="scss">
    /*@import '../../assets/scss/index';*/

    #navcontainer {
        /*border: solid red 1px;*/
        .title {
            position: relative;
            width: 6.25rem;
            text-align: center;
            background-size: cover;
            background-repeat: no-repeat;

            .title-text {
                font-size: 0.3rem;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%);
                color: #f1f1f1;
            }

            .title-bototm {
                position: absolute;
                bottom: -0.375rem;
                left: 50%;
                transform: translate(-50%);
            }
        }

        // 平行四边形
        .react-left {
            cursor: pointer;
            font-size: 0.225rem;
            width: 3.75rem;
            height: 0.625rem;
            line-height: 0.625rem;
            text-align: center;
            transform: skewX(-45deg);
            background-color: #0f1325;

            .react-after {
                position: absolute;
                right: -0.3125rem;
                top: 0;
                height: 0.625rem;
                width: 0.625rem;
                background-color: #0f1325;
                transform: skewX(45deg);
            }

            .text {
                display: inline-block;
                transform: skewX(45deg);
            }
        }

        .react-right {
            cursor: pointer;
            font-size: 0.225rem;
            width: 3.75rem;
            height: 0.625rem;
            line-height: 0.625rem;
            text-align: center;
            transform: skewX(45deg);

            .react-before {
                position: absolute;
                left: -0.3125rem;
                top: 0;
                height: 0.625rem;
                width: 0.625rem;
                background-color: #0f1325;
                transform: skewX(-45deg);
            }

            .text {
                display: inline-block;
                transform: skewX(-45deg);
            }
        }
    }

</style>
